<template>
  <div class="m-token-infos">
    <div class="head flex-left">
      <img :src="infos.icon" alt>
      <span>{{infos.symbol}}</span>
      <span
        v-if="infos.nickname&&JSON.parse(infos.nickname)[lang]"
      >&nbsp;({{JSON.parse(infos.nickname)[lang]}})</span>
    </div>
    <div class="infos table-shadow">
      <div class="line flex-left">
        <img src="../../../assets/img/tip/red.png">
        <label>{{$t('tokenDetail.issueTotal')}}</label>
        <span>{{(infos.total/100000000||'')|filterNum}}</span>
      </div>
      <div class="line flex-left">
        <img src="../../../assets/img/tip/blue.png">
        <label>{{$t('tokenDetail.holder')}}</label>
        <span>{{infos.holders|filterNum}}</span>
      </div>
      <div class="line flex-left">
        <img src="../../../assets/img/tip/pink.png">
        <label>{{$t('address.txCount')}}</label>
        <span>{{infos.txCount|filterNum}}</span>
      </div>
      <div class="line flex-left">
        <img src="../../../assets/img/tip/green.png">
        <label>{{$t('tokenDetail.issueTime')}}</label>
        <span>{{infos.createdTime|formatTime}}</span>
      </div>
      <div class="line flex-left">
        <img src="../../../assets/img/tip/red.png">
        <label>{{$t('tokenDetail.point')}}</label>
        <span>8</span>
      </div>
      <div class="line flex-left">
        <img src="../../../assets/img/tip/blue.png">
        <label>{{$t('tokenDetail.value')}}</label>
        <span>￥{{Number(infos.rmb).toFixed(8).slice(0,-6)||0.00}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    infos: {
      type: Object,
      default: () => {
        return {
          icon: "",
          symbol: "",
          total: "",
          holders: "",
          txCount: "",
          createTime: "",
          ceilpoint: "",
          web: ""
        };
      }
    }
  },
  computed: {
    lang() {
      let language = "";
      switch (this.$store.state.initLang) {
        case "zh":
          language = "zh-CN";
          break;
        case "en":
          language = "en-US";
          break;
        case "ja":
          language = "ja";
          break;
        default:
          break;
      }
      return language;
    }
  }
};
</script>

<style lang="scss" scoped>
.m-token-infos {
  .head {
    span {
      margin: 0 4px;
      font-size: 14px;
      color: $black;
    }
    .title {
      color: #9aaab9;
    }
    img {
      height: 23px;
    }
  }
  .infos {
    margin-top: 10px;
    background: $white;
    border: 1px solid rgba(235, 239, 241, 1);
    padding: 10px;
    color: $black;
    .line {
      height: 37px;
      // line-height: 37px;
      label {
        margin-left: 10px;
        width: 6em;
      }
    }
  }
}
</style>